<html lang="fr">
<head>
	<meta charset="utf-8">
	<title>Fotostep - Photos de l'album</title>
	<meta name="viewport" content="width=device-width, initial-scale=1.0">
	<meta name="description" content="">
	<meta name="author" content="">

	<!-- Le styles -->
	<link href="css/bootstrap.css" rel="stylesheet">
	<style>
	body {
		padding-top: 60px; /* 60px to make the container go all the way to the bottom of the topbar */
	}
	</style>
	<link href="css/bootstrap-responsive.css" rel="stylesheet">
	<link rel="stylesheet" href="http://cdn.leafletjs.com/leaflet-0.4/leaflet.css" />
	<!-- HTML5 shim, for IE6-8 support of HTML5 elements -->
		<!--[if lt IE 9]>
		<script src="http://html5shim.googlecode.com/svn/trunk/html5.js"></script>
		<![endif]-->


	</head>


	<body>
		<div class="container">	
			<div class="navbar navbar-inverse navbar-fixed-top">
				<div class="navbar-inner">
					<div class="container">
						<a class="brand" href="index.html"> <img src="img/logo.png"></a>
						<div class="nav-collapse collapse">
							<ul class="nav">
								<li><a href="#">Accueil</a></li>
								<li><a href="#about">Rechercher des photos</a></li>
								<li class="active"><a href="#">Inscription</a></li>
							</ul>
							<form class="form-inline pull-right" style="display: inline; margin-bottom: 0; margin-left: 15px" method="post">
								<input type="text" placeholder="Email" class="input-small" name="login">
								<input type="password" placeholder="Mot de passe" class="input-small" name = "passwd">
								<button class="btn" type="submit" style="margin: 5px">S'identifier</button>
							</form>
						</div><!--/.nav-collapse -->
					</div>
				</div>
			</div> <!-- nav-bar-->

			
			<div class="page-header">
				<h1><img src="img/header-logo.png"/></h1>
			</div>

			<div class = "row">
				<div class="span3">					
					<div class="well sidebar-nav">
						<ul class="nav nav-list">
							<li><a href="#">Accueil</a></li>
							<li class="nav-header">Mon compte</li>
							<li><a href="#">Ajouter des photos</a></li>
							<li><a href="#">Modifier mon compte</a></li>
							<li class="active"><a href="#">Voir mon profil</a></li>
							<li class="nav-header">Mes contacts</li>
							<li><a href="#">Voir mes contacts</a></li>
						</ul>
					</div>					
				</div>

				<div class = "span9">
					<div class = "page-header">
						<h2>Titre de l'album - Photo (1/42)</h2>
						
						<div class="btn-group">
							<a href="#" class="btn btn-info" id="btn-like"><i class="icon-heart icon-white"></i> 42</a>
							<a href="#" class="btn btn-success" id="btn-unlike"><i class="icon-minus icon-white"></i> 43</a>							
						</div>
					</div>							

					<div class = "span9" id = "albums-container">

						<div class = "row">
								<ul class="pager">
							  <li class="previous">
							    <a href="#">&larr; Image pr&eacute;c&eacute;dente</a>
							  </li>
							  <li class="next">
							    <a href="#">Image suivante &rarr;</a>
							  </li>
							</ul>
						
							<img src = "js/holder.js/800x600" class="span8"/>
							
							<div class = "row span10">
								<dl class="dl-horizontal">
								  <dt>Description</dt>
								  <dd>La photo fut prise dans ton cul ...</dd>
								  <dt>Tags</dt>
								  <dd>
								  	<ul class = "unstyled inline">
								  		<li class="label">Tag 1</li>
								  		<li class="label">Tag 2</li>
								  	</ul>
								  </dl>
								</dl>
							</div>
						</div>
						
						<hr>
						<div class = "row span10">
							<h3>Commentaires</h3> 
								<div class="media">
								  <a class="pull-left" href="#">
								    <img class="media-object" data-src="holder.js/64x64">
								  </a>
								  <div class="media-body">
								    <h4 class="media-heading">Media heading</h4>							 
								    <div class="media">
								    	<p> Le texte du commentaire</p>
								    	<small> Le 28 / 12 / 2013 </small>
								    </div>
								  </div>
								</div>

								<a href="#">Tout voir</a>
						</div>
						<div class = "row span10">
							<h3>Poster un commentaire</h3>

							<form>
							  <fieldset>
							    <textarea  class = "span7 offset2"></textarea>
							    <span class="help-block">Tapez votre commentaire plus cliquez sur "Valider"</span>

							    <button type="submit" class="btn">Valider</button>
							  </fieldset>
							</form>

						</div>

					</div>
								
				</div>




			</div>

		</div>

		<footer>
			<p>&copy; Fotostep 2012</p>
		</footer>

	</div><!-- Container-->


	<script src="js/jquery.js"></script>
	<script src="js/bootstrap.js"></script>
	<script src="js/bootstrap-tabs.js"></script>
	<script src="js/holder.js"></script>
	
	<script>
	$('#profileTab a').click(function (e) {
		e.preventDefault();
		$(this).tab('show');
	})
	</script>


</body>

</html>